 <template>
	<view class="userInvite_page clearfix">
		<view class="invite_share">
			<view class="sub_title">分享注册推广海报，新手也可赚钱啦</view>
			<view>海报自动生成并带有您的专属二维码</view>
			<wyb-button class="btn" :ripple="true" type="plain" color="#585cf7" :radius="radius" width="80%"
				height="80rpx" font-size="32rpx" @click="shareCode" :count-down="false">分享推广海报用户自动注册</wyb-button>
		</view>
		<view class="achi">
			<scroll-view class="scroll_Y" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"
				refresher-enabled="true" :refresher-threshold="50" refresher-background="#F8F8F8"
				scroll-anchoring="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore">
				<view class="title">我的业绩
					<navigator class="text" url="/pages/userInvite/invietRule">奖励规则</navigator>
				</view>
				<view class="achi_ran">
					<view class="rank_wrap">
						<view class="num">{{data.number || 0}}</view>
						<view class="sub_title">有效注册</view>
					</view>
					<view class="rank_wrap">
						<view class="num">{{data.ratio? data.ratio+'%': 0 }}</view>
						<view class="sub_title">业绩有效率</view>
					</view>
					<view class="rank_wrap">
						<view class="num">￥{{data.bonus||0}}</view>
						<view class="sub_title">奖金收入</view>
					</view>
				</view>
				<view class="wrap">
					<view class="col_title">
						<text class="item_01">用户ID</text>
						<text class="item_01">业绩达成</text>
						<text class="item_01">奖励情况</text>
					</view>
					<scroll-view scroll-y="true" class="scrollIn_Y" @scrolltolower="loadMore()">
						<view class="list" v-if="dataList.length>0">
							<view class="item" v-for="item in dataList" :key="item.id">
								<text class="item_01">{{item.name}}</text>
								<text class="item_02">{{item.isAttain == 0? '否':'是'}}</text>
								<text class="item_03">{{item.close}}</text>
							</view>
						</view>
						<view v-else class="nocontent">
							<image src="/static/image/public/WSJ.png" class="wsjImg"></image>
							<view>暂无数据</view>
						</view>
						<view class="loading-more" v-if="this.pages>1">
							<text class="loading-more-text">{{loadText}}</text>
						</view>
					</scroll-view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				triggered: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				radius: ['100px'],
				loadText: "加载更多...",
				data: {
					"bonus": 0,
					"number": 0,
					"ratio": 0,
					"registerDataPage": {
						"current": 0,
						"pages": 0,
					}
				},
				dataList: [],
				pageNum: 0,
				pages: 0,
			};
		},
		onLoad() {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 200)
		},
		methods: {
			//分享推广海报
			shareCode() {
				// console.log(123456)
				this.$api.getRegisterCode().then(res => {
					this.downImg(res.data.data)
				})
			},
			//下载图片
			downImg(imgUrl) {
				let that = this;
				that.previewImg(imgUrl);
			},
			//预览图片
			previewImg(src) {
				let imgUrl = [];
				imgUrl=[...src];
				console.log(imgUrl)
				uni.previewImage({
					current:imgUrl[0],
					urls: imgUrl,
					fail(e) {
						console.log(e)
					}
				})
			},
			//加载更多
			loadMore() {
				if (this.pageNum > this.pages) {
					this.loadText = "没有更多数据了";
					return;
				}
				let pages = this.pageNum + 1;
				let parmas = {};
				parmas.pageNo = pages;
				this.getRegisterShow(parmas);
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			//上拉刷新
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					let parmas = {};
					this.getRegisterShow(parmas);
					this.loadText = "加载更多...";
				}, 3000)
			},
			//上拉刷新复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			//获取邀请数据
			getRegisterShow(parmas) {
				this.$api.getRegisterShow(parmas).then(res => {
					this.data = res.data.data;
					this.pages = res.data.data.registerDataPage.pages;
					this.pageNum = res.data.data.registerDataPage.current;
					let dataL = res.data.data.registerDataPage.records;

					if (this.dataList.length > 0) {
						this.dataList = this.dataList.concat(dataL);
					} else {
						this.dataList = dataL
					}

					this.triggered = false;
					this._freshing = false;
				}).catch(() => {
					this.triggered = false;
					this._freshing = false;
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
		height: 100%;
	}
</style>
<style lang="scss">
	.userInvite_page {
		height: 100%;
	}

	.invite_share {
		margin: 20rpx 30rpx;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		text-align: center;
		height: 320rpx;

		.sub_title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin: 38rpx 0 18rpx 0
		}

		.btn {
			margin: 18rpx auto 0;
		}
	}

	.title {
		font-size: 32rpx;
		font-weight: 800;
		line-height: 60rpx;
		height: 60rpx;

		.text {
			float: right;
			font-size: 24rpx;
			color: #999999;
			font-weight: normal;
		}
	}

	.achi {
		margin-bottom: 30rpx;
		margin: 20rpx 30rpx;
		height: calc(100% - 410rpx);

		.scroll_Y {
			height: 100%;
			width: 100%;
			background: #F8F8F8;
		}

		.achi_ran {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 30rpx 0;
			height: 160rpx;
			background: #FFFFFF;
		}

		.rank_wrap {
			text-align: center;
		}

		.num {
			font-size: 46rpx;
			font-weight: bold;
			color: #FC4073;
		}

		.sub_title {
			font-size: 26rpx;
			color: #333333;
		}

		.wrap {
			padding: 20rpx;
			width: 100%;
			background: #FFFFFF;
			height: calc(100% - 300rpx);
			overflow: hidden;
		}

		.scrollIn_Y {
			width: 100%;
			height: calc(100% - 60rpx);
			background: #F8F8F8;
			position: relative;
		}

		.col_title {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 60rpx;
			background: #F8F8F8;

			text {
				font-size: 28rpx;
				color: #999999;
			}
		}

		.list {
			width: 100%;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 44rpx;
			color: #333333;
			padding: 0 30rpx;

			.item_01 {
				width: 30%;
				text-align: center;
			}

			.item_02 {
				width: 40%;
				text-align: center;
			}

			.item_03 {
				width: 30%;
				text-align: center;
			}
		}

		.nocontent {
			width: 100%;
			font-size: 15px;
			text-align: center;
			color: #999999;
			line-height: 50px;
			padding-top: 20rpx;

			.wsjImg {
				width: 180px;
				height: 125px;
				margin: 0 auto;
			}
		}

		.loading-more {
			align-items: center;
			justify-content: center;
			padding-top: 10px;
			padding-bottom: 10px;
			text-align: center;
		}

		.loading-more-text {
			font-size: 28rpx;
			color: #999;
		}
	}
</style>
